<!-- 没有折叠的table -->
<template>
  <div class="table">
    <div class="thead">
      <div 
        :class="tableData.thead[i].width?'th '+tableData.thead[i].width:'th'" 
        v-for="(item,i) in tableData.thead" 
        :key="i">
        {{item.label}}
      </div>
      <div v-if="tableData.isNeedDetails" class="th detailTd">详情</div>
    </div>
    <div class="tbody" v-for="(item,i) in tableData.tbody" :key="i">
        <!-- <van-notice-bar
          :class="tableData.thead[index].width?'td '+tableData.thead[index].width:'td'"
          :color="tableData[`index${index}Color`]||'#000'" 
          background="transparent" 
          v-for="(itemTd,index) in tableData.thead" 
          :key="index"
          :text="item[itemTd.prop]"
        /> -->
        <div
          :class="tableData.thead[index].width?'td '+tableData.thead[index].width:'td'"
          :style="{color:tableData[`index${index}Color`]||'#000',background:'transparent'}"
          v-for="(itemTd,index) in tableData.thead" 
          :key="index"
          >
          {{item[itemTd.prop]}}
        </div>
        <div v-if="tableData.isNeedDetails" class="detailTd">
          <img @click="detail(item)" class="operation" src="../../assets/detail.png" alt="">
        </div>
    </div>
    <van-empty v-if="tableData.tbody.length==0" description="暂无数据" />   
  </div>
</template>

<script>
/**
 * tableData:{
 *    thead:[{prop:'字段名',label:'表头文字',width:'flex1-4',//默认3}],
 *    tbody:[{}], 表格数据,
 *    isNeedDetails: true/false 是否需要详情列
 *    index0Color: 色值,
 *    index1Color: 色值
 * }
 */
import { getUserInfo } from '@/api/index.js'
export default {
  props:['tableData'],
  components: {},
  data() {
  return {
      
    };
  },
  methods: {
    detail(item){//详情
      if (item.zRoute) {
        this.$router.push({path:`${item.zRoute}/${item.type||''}/${item.uuid||''}`})
      } else {
        window.location.href = item.url;
      }
    },
    
  }
}
</script>
<style scoped>
.table{
  width: 100%;
  font-size: 2.2rem;
}
.van-notice-bar {
  text-align: center;
  padding: 0;
  font-size: 2.2rem;
}

.thead,.tbody{
  display: flex;
  padding-left: 2rem;
  justify-content: space-between;
}
.thead{
  background: #fff;
}
.table .tbody:nth-child(even){
  background: #F6F6F6;
}
.td,.th{
  flex: 3;
  min-height: 30px;
  margin:0 3px;
  text-align: left;
  display: flex;
  align-items: center;
  /* overflow: hidden;
  white-space: nowrap; */
}
.flex1{
  flex:1;
}
.flex2{
  flex:2;
}
.flex3{
  flex:3;
}
.flex4{
  flex:4;
}
.detailTd{
  flex: 1 ! important;
  margin:0 3px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.detailTd img{
  width: 17px;
  height: 17px;
}
</style>